<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" charset="utf-8"
	src="js/jquery.listnav.min-2.1.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.dataTables.listnav.js"></script>
<style type="text/css">
	.span3 fieldset {
		border-bottom: 1px solid #E5E5E5;
	}
	.row-fluid .span3 {
    	width: 100%;
	}
	
	legend{
		margin-bottom: 0;
	}
	
	.blockOrderDetail{
		border: 1px solid;
		padding-top: 10px;
		margin: 5px;
	}
	
	.blockOrderDetail .rowA,.blockOrderDetail .rowB{
		float: left;
		width: 45%;
	}
	#addBlockOrderDetail{
		margin-bottom: 10px;
	} 
	#addBlockOrderDetail a{
		cursor: pointer;
	}
</style>

<script type="text/javascript">
function selectProductType(index){
	var productTypeSelectId = $("#productTypeSelect"+index).val();
	$.ajax({
		url: "getProductByType.action",
		data: "productTypeId="+productTypeSelectId,
		contentType: "application/json",
		dataType: "json",
		success: function(data){
			var productArray = data.productByTypeJson;
			var productSelectBox = $("#productSelect"+index);
			productSelectBox.html("");
			productSelectBox.append("<option value='0'>Product</option>");
			if(productArray != null && productArray.length > 0){
				for(var i = 0; i < productArray.length; i++){
					var optionString = "<option value='" + productArray[i][0] + "'>" + productArray[i][1] + "</option>";
					productSelectBox.append(optionString);
				}
			}
		},
		error: function(){
			alert("error");
		}
	
	});
};

function addBlockOrderDetail(){
	var blockCount = $("#infoDetailOrder .blockOrderDetail").size();
	alert(blockCount);
	var infoDetailOrder = $("#infoDetailOrder");
	var productTypeHide = $("#productTypeHide").html();
	var blockOrderDetailString = '<div class="blockOrderDetail control-group">';
	blockOrderDetailString += '<div class="control-group"><div class="rowA">'
	blockOrderDetailString += '<label for="productTypeSelect" class="control-label">Product Type</label>';
	blockOrderDetailString += '<div class="controls" id="productTypeBlock'+blockCount+'">';
	blockOrderDetailString += productTypeHide;
	blockOrderDetailString += '</div></div>';
	blockOrderDetailString += '<div class="rowB">';
	blockOrderDetailString += '<label for="productSelect'+ blockCount +'" class="control-label">Product</label>';
	blockOrderDetailString += '<div class="controls">';
	blockOrderDetailString += '<select id="productSelect'+ blockCount +'" name="productIds">';
	blockOrderDetailString += '<option value="0">Product</option>';
	blockOrderDetailString += '</select></div></div></div>';
	blockOrderDetailString += '<div class="control-group">';
	blockOrderDetailString += '<label for="req" class="control-label">Quantity</label>';
	blockOrderDetailString += '<div class="controls">'
	blockOrderDetailString += '<input type="text" id="price'+blockCount+'" class="required" name="quantitys">';
	blockOrderDetailString += '</div></div>';
	blockOrderDetailString += "</div>";
	
	infoDetailOrder.append(blockOrderDetailString);
	$("#productTypeBlock"+blockCount+ " .productTypeClass").attr("id","productTypeSelect"+blockCount);
	$("#productTypeSelect"+blockCount).attr("onchange","selectProductType("+ blockCount +")");
};
</script>

<title>Edit Contact</title>
<s:if test="#session.logged != 'true'">
	<jsp:forward page="../index.jsp" />
</s:if>
<div class="content">
	<div class="row-fluid">
		<div class="span12">
			<div class="box">
				<div class="box-head">
					<h3>Edit Product</h3>
				</div>
				<div class="box-content" id="create-content">
					<form action="updateOrder.action"
						class='validate form-horizontal' method="post">
						<input type="hidden" name="orderFood.id" value='<s:property value="orderFood.id"/>'>
						<div class="row-fluid force-margin">
							<div class="span3">
								<fieldset>
									<legend>Info Order</legend>
									<!-- <div class="control-group">
										<label for="req" class="control-label">Order name</label>
										<div class="controls">
											<input type="text" id="req" class='required' value=''>
										</div>
									</div> -->
									
									<div class="control-group">
										<label for="req" class="control-label">Member</label>
										<div class="controls">
											<select id="member" name="memberId">
												<option value="<s:property value="0" />">Member</option>
												<s:iterator value="members" var="member">
													<option value="<s:property value="id" />"><s:property value="account" /></option>
												</s:iterator>
											</select>
										</div>
									</div>
									
									<div class="control-group">
										<label for="req" class="control-label">User</label>
										<div class="controls">
											<select id="user" name="userId">
												<option value="<s:property value="0" />">User</option>
												<s:iterator value="users" var="user">
													<option value="<s:property value="id" />"><s:property value="account" /></option>
												</s:iterator>
											</select>
										</div>
									</div>
								</fieldset>
								<fieldset >
									<legend>Info Detail Order</legend>
									<div id="infoDetailOrder">
										<%-- <div class="blockOrderDetail control-group">
											<div class="control-group">
												<div class="rowA">
													<label for="productTypeSelect" class="control-label">Product Type</label>
													<div class="controls">
														<select id="productTypeSelect" onchange="selectProductType(this)">
															<option value="0">Product Type</option>
															<s:iterator value="productTypes" var="productType">
																<option value="<s:property value="id" />"><s:property value="name" /></option>
															</s:iterator>
														</select>
													</div>
												</div>
												<div class="rowB">
													<label for="productSelect" class="control-label">Product</label>
													<div class="controls">
														<select id="productSelect" >
															<option value="0">Product</option>
														</select>
													</div>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Quantity</label>
												<div class="controls">
													<input type="text" id="price" class='required' value=''>
												</div>
											</div>
										</div> --%>
									</div>
									<div id="addBlockOrderDetail" > <a onclick="addBlockOrderDetail();">Add New Order Detail</a> </div>
								</fieldset>
							</div>
							<div class="row-fluid">
								<div class="span12">
									<div class="form-actions">
										<button class="btn btn-primary" type="submit">Send</button>
										<a href="contact.action" class='btn btn-danger'>Close</a>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="productTypeHide" style="display: none;">
	<select class="productTypeClass">
		<option value="0">Product Type</option>
		<s:iterator value="productTypes" var="productType">
			<option value="<s:property value="id" />"><s:property value="name" /></option>
		</s:iterator>
	</select>
</div>